<template>
    <div class="">
        <div class="qiye" v-if="(saveRoleName.indexOf('市级管理员')>-1)||(saveRoleName.indexOf('区县管理员')>-1)">
            <div class="intro">
                <div class="title">人才分布概况</div>
                <div class="ben">本年</div>
            </div>
            <div class="danwei">数量(个)</div>
            <div v-if="saveRoleName.indexOf('市级管理员')>-1" ref="pieChartX" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
            <div v-if="saveRoleName.indexOf('区县管理员')>-1" ref="pieChartY" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
        </div>
        <div class="hangye" v-f="chartsrcxlData.length">
            <div class="intro">
                <div class="title">学历分布概况</div>
            </div>
            <div class="pie-box">
              <div ref="pieChart2" style="width: 16rem; height: 18rem;"></div>
              <div class="chartsdv">
                <div class="chart-shuju" v-for="(item, index) of chartsrcxlData" :key="index">
                    <div class="titlecr" :style="{background: item.color}"></div>
                    <div class="titlep1">{{item.title}}</div>
                    <div class="titlep">{{item.percent*100}}%</div>
                    <div class="titlep">{{item.value}}</div>
                </div>
              </div>
            </div>
        </div>
        <div class="rczyfx" v-if="rcdjList.length">
          <div class="tips">人才等级分布概况</div>
          <div class="zong">
            <div class="z1"></div>
            <div class="z2"></div>
            <div class="z3"></div>
            <div class="z4"></div>
            <div class="z5 "></div>
            <div class="z6"></div>
            <div class="z7 "></div>
          </div>
          <div class="progress">
            <div class="ps-item" v-for="(item, index) of rcdjList" :key="index">
              <div class="icondv" :style="{background: item.color}">{{ item.title.substring(0,1) }}</div>
              <div class="jdt">
                <div class="ps-name">
                  <div class="leixing">{{ item.title }}</div>
                  <div class="zynum">{{ item.value }}人</div>
                </div>
                <van-progress :percentage="item.percent*100+'%'" stroke-width="8" :color="item.color" />
              </div>
            </div>
          </div>
      </div>
    </div>
  </template>
   
  <script setup>
  import { onMounted, ref } from 'vue';
  import { getUserInfo,getryfbgk,getrcxlfbgk,getrcdjfbgk } from '@/api/company';
  import * as echarts from 'echarts';

  const saveRoleName = ref('')
  saveRoleName.value = localStorage.getItem('myRoleName')
  console.log('人才role:',saveRoleName.value);
  if(saveRoleName.value == '市级管理员'){
    setTimeout(()=>{
      chartPieCanvasX()
    },1000)
  }else if(saveRoleName.value == '区县管理员'){
    setTimeout(()=>{
      chartPieCanvasY()
    },1000)
  }
   
  const pieChartX = ref(null);
  var chartsDataList = []
  var chartsAddressList = []
  async function getrcFbgkDetail() {
    const { code, data } = await getryfbgk();
    if(code === 200) {
      data.forEach(item=>{chartsDataList.push(item.value)})
      data.forEach(item=>{chartsAddressList.push(item.title)})
      console.log('chartsDataList:',chartsDataList);
      console.log('chartsAddressList:',chartsAddressList);
    }
  }
  const chartPieCanvasX = ()=>{
    const chartInstance = echarts.init(pieChartX.value);
   const option = {
    xAxis: {
      data: ['海陵区','高港区', '姜堰区', '兴化区', '靖江区', '泰兴区'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: chartsDataList,
        barWidth: '30%',
        color: '#34A8FE'
      }
    ]
  };
    chartInstance.setOption(option);
  }

  const pieChartY = ref(null);
  const chartPieCanvasY = ()=>{
    const chartInstance = echarts.init(pieChartY.value);
  //  const option = {
  //   yAxis: {
  //     data: chartsAddressList,
  //     axisLabel: {
  //       fontSize: 7
  //     }
  //   },
  //   xAxis: {},
  //   series: [
  //     {
  //       type: 'bar',
  //       data: chartsDataList,
  //       barWidth: '30%',
  //       color: '#34A8FE'
  //     }
  //   ]
  // };
  const option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    axisLine:{
      show:false
    },
    axisTick:{
      show:false
    },
    axisLabel:{
      show:false,
    },
    data: chartsAddressList
  },
  series: [
    {
      type: 'bar',
      barGap: 0,
      data: chartsDataList,
      barWidth:40,
      label: {
        show: true,
        fontSize:12,
        position: [10, 10],
        formatter: '{b}',
      },

    },
    {
      type: 'bar',
      data: chartsDataList,
      barWidth:20,
      label: {
        show: true,
        position: 'right',
      },

    }
  ],

  };
    chartInstance.setOption(option);
  }

  const talentxlList = []
  const chartsrcxlData = ref([])
  const rctotal = ref('')
  async function getxlFbgkDetail() {
    const { code, data } = await getrcxlfbgk();
    if(code === 200) {
      chartsrcxlData.value = data.dataList
      console.log('chartsrcxlData.value:',chartsrcxlData.value);
      chartsrcxlData.value[0].color = "#3BA0FF";
      rctotal.value = data.total

      if(chartsrcxlData.value[1]){
        chartsrcxlData.value[1].color = "#36CBCB";
      }
      if(chartsrcxlData.value[2]){
        chartsrcxlData.value[2].color = "#4DCB73";
      }
      if(chartsrcxlData.value[3]){
        chartsrcxlData.value[3].color = "#FAD337";
      }
      data.dataList.forEach(item=>{
        talentxlList.push({
          name: item.title,
          value: item.value
        })
      })
      console.log('talentxlList:',talentxlList);
    }
  }

  const pieChart2 = ref(null);
  const chartPieCanvas2 = ()=>{
    const chartInstance2 = echarts.init(pieChart2.value);
    const option2 = {
      title: {
        text: "总人数\n" + rctotal.value,
        left: 'center',
        top: 'center',
        textStyle: {
          fontSize: 12 // 修改字体大小
        }
      },
      series: [
        {
          type: 'pie',
          color: [
            '#3BA0FF',
            '#36CBCB',
            '#4DCB73',
            '#FAD337'
          ],
          data: talentxlList,
          radius: ['40%', '70%'],
          label:{
            show: false
          }
        }
      ]
    };
    chartInstance2.setOption(option2);
  }


  const rcdjList = ref([])
  async function getrcdjFbgkDetail() {
    const { code, data } = await getrcdjfbgk();
    if(code === 200) {
      rcdjList.value = data.dataList
      rcdjList.value[0].color = "#FFCB9B";
      if(rcdjList.value[1]){
        rcdjList.value[1].color = "#FF8385";
      }
      if(rcdjList.value[2]){
        rcdjList.value[2].color = "#2684FF";
      }
      if(rcdjList.value[3]){
        rcdjList.value[3].color = "#47D187";
      }
      if(rcdjList.value[4]){
        rcdjList.value[4].color = "#9C8BFF";
      }
      if(rcdjList.value[5]){
        rcdjList.value[5].color = "yellowgreen";
      }
      if(rcdjList.value[6]){
        rcdjList.value[6].color = "orangered";
      }
    }
  }
  
   
  onMounted(() => {
    getrcFbgkDetail()
    getxlFbgkDetail()
    getrcdjFbgkDetail()
    setTimeout(()=>{
      chartPieCanvas2()
    },1000)
  });
  </script>

<style lang="scss" scoped>
.intro{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ben{
    width: 7.6rem;
    height: 2.8rem;
    line-height: 2.8rem;
    border-radius: 4px;
    background: #FFFFFF;
    border: 1px solid #D2DCE7;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
}
.qiye,.hangye{
    background: #fff;
    padding: 1rem;
}
.qiye{
  margin-bottom: 2rem;
}
.title{
    font-size: 1.8rem;
    font-weight: 700;
}
.danwei{
    font-size: 1.2rem;
    font-weight: 400;
    color: #B0B0B0;
    position: relative;
    top: 3.5rem;
    left: 0.5rem;
}
.pie-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chartsdv{
  width: 50%;

  .chart-shuju{
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 20rem;

    .titlecr{
      width: 0.8rem;
      height: 0.8rem;
      margin-bottom: 1.6rem;
      border-radius: 50%;

    }
    .titlep1{
      font-size: 1.4rem;
      font-weight: 400;
      color: #D1D1D1;
      text-align: center;
      margin-bottom: 1.6rem;
      width: 5rem;
      text-align: center;
    }
    .titlep{
      font-size: 1.4rem;
      font-weight: 700;
      color: #6D6D6D;
      text-align: center;
      margin-bottom: 1.6rem;
      width: 5rem;
      text-align: center;
    }
    .titlep2{
      font-size: 1.4rem;
      font-weight: 700;
      color: #333333;
      text-align: center;
      width: 5rem;
      text-align: center;
    }
  }
}
.rczyfx{
    margin-top: 2rem;
    border-radius: 5px;
    background: #FFFFFF;
    padding: 1.1rem 1.3rem;
    box-sizing: border-box;
    box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);

    .tips{
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 1.6rem;
    }
    .zong{
      margin-bottom: 3rem;
      position: relative;
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background: #C1C7D0;

      .z1{
        position: absolute;
        height: 10px;
        width: 20%;
        background: #FFCB9B;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        left: 0;
        top: 0;
      }
      .z2{
        position: absolute;
        width: 20%;
        height: 10px;
        background: #FF8385;
        left: 20%;
        top: 0;
      }
      .z3{
        position: absolute;
        width: 20%;
        height: 10px;
        background: #2684FF;
        left: 40%;
        top: 0;
      }
      .z4{
        position: absolute;
        width: 10%;
        height: 10px;
        background: #47D187;
        left: 50%;
        top: 0;
      }
      .z5{
        position: absolute;
        width: 10%;
        height: 10px;
        background: #9C8BFF;
        left: 55%;
        top: 0;
      }
      .z6{
        position: absolute;
        width: 10%;
        height: 10px;
        background: yellowgreen;
        left: 65%;
        top: 0;
      }
      .z7{
        position: absolute;
        width: 10%;
        height: 10px;
        background: orangered;
        left: 75%;
        top: 0;
      }
    }
    .progress{

      .ps-item{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 3rem;

        .icondv{
          width: 5rem;
          height: 5rem;
          line-height: 5rem;
          margin-right: 1.5rem;
          text-align: center;
          font-size: 1.5rem;
          color: #fff;
          border-radius: 20px;
        }
        .jdt{
          width: 90%;

          .ps-name{
            margin-bottom: 0.6rem;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .leixing{
                font-size: 1.4rem;
                font-weight: 400;
                margin-right: 2.8rem;
                color: #002251;
              }
              .zynum{
                  font-size: 1.6rem;
                  font-weight: 400;
                  color: #002251;
                }
          }
        }

      }

    }
}
  </style>